<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html lang="en">
<!-- 设置网页语言为英语 -->
<head>
    <!-- 文档头部，包含元数据和样式信息 -->
    <meta charset="UTF-8">
    <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置视口，使页面在移动设备上正确显示 -->
    <title>Document</title>
    <!-- 页面标题 -->
    <style>
        /* CSS样式部分 */
        video{
            /* 视频元素样式 */
            width: 100%;
            /* 设置视频宽度为容器的100% */
        }
        span{
            /* 文字覆盖层样式 */
            color:black;
            /* 文字颜色为黑色 */
            position: absolute;   
            /* 绝对定位，相对于最近的定位祖先元素 */
            font-size: 10em;
            /* 字体大小，相对较大 */
            font-weight: bold;
            /* 字体加粗 */
            inset: 0;
            /* 新的CSS属性，相当于top:0;right:0;bottom:0;left:0; */
            display: flex;
            /* 使用弹性布局 */
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            background: white;
            /* 背景颜色为白色 */
            mix-blend-mode: screen;
            /* 混合模式设置为screen(滤色)，与背景视频混合显示 */
            
            /* 混合模式说明:
            screen: 滤色模式，通常用于创建更亮的效果
             */
        }
    </style>
</head>
<body>
    <!-- 页面主体内容 -->
    <div>
        <!-- 容器div，包含视频和文字 -->
        <!-- autoplay 自动播放  muted 静音  loop 循环播放-->
        <video src="./91f1811318fc45feaea012212c62ad67.mp4" autoplay muted loop ></video> 
        <!-- 视频元素:
             src: 视频文件路径
             autoplay: 页面加载后自动播放
             muted: 静音播放(许多浏览器要求自动播放必须静音)
             loop: 循环播放视频 -->

        <span> 三国志</span>
        <!-- 覆盖在视频上的文字，使用CSS混合模式实现特效 -->
    </div>
</body>
</html>